<template>
  <div class="bin">
     <el-card class="loginbox">
        <el-row>
                <el-col :span="24" class="logo">
                    <img src="@/assets/1423.png"
                    width="128" height="128"/>
                </el-col>
            </el-row>
     <el-form ref="ruleForm" :model="form" class="fromdx">
      <el-form-item
        :rules="{ required: true, message: '请输入账号', trigger: 'change' }"
      >
        <el-input placeholder="请输入账号" v-model="username"></el-input>
      </el-form-item>

      <el-form-item
        :rules="{ required: true, message: '请输入密码', trigger: 'change' }"
      >
        <el-input type="password" placeholder="请输入密码" v-model="passwd"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button class="width100" type="primary" @click="add"
          >登陆</el-button
        >
        <span class="qx">
         <el-button @click="aa" >取消</el-button>
         </span>
      </el-form-item>
    </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" >
import { ref, reactive,computed,toRefs} from "vue";
import { useRouter } from 'vue-router';
import httpRequest from '../service'
interface DataProps{
  username:string,
  passwd:string,
  add:()=>void,
}
export default {
  name:'Longin',
  setup(){
    const router = useRouter();
    const data:DataProps=reactive({
    username:"",
    passwd:"",
    // 登录
    add:()=>{
  httpRequest
  .request({
    url: '/users/login',
    method: 'post',
    data:{
      username:data.username,
      passwd:data.passwd
    },
    interceptors: {
      requestInterceptor: (config) => {
        console.log(config)
        return config
      }
    }
  })
  .then((res:any) => {

    if(res.code===200){
      router.push("/index")
      sessionStorage.setItem('token','Bearer '+res.data.token)  
       sessionStorage.setItem('id',res.data.id)  
       }
  })
    },
  })
  const refData=toRefs(data)
  return{
    ...refData
  }
  }


}


</script>

<style lang="less" scoped>
.qx{

  margin-left: 10px;
  position: relative;
  left: 55px;
}
h1{
  text-align: center;
}

.fromdx{
 position: absolute;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

 .loginbox{
        width: 600px;
        height: 400px;
        margin: calc((100vh * 0.5) - 228px) auto;
    }
    .logo{
        img{
            border-radius: 50%;
            box-shadow: 3px 3px 3px #ccc;
            margin-left: 37%;
        }
    }
    .title{
        padding: 20px 0;
    }

</style>


